Detail transaction page

1 files changed, 128 insertions, 0 deletions

diff --git a/src/pages/my/transactions/[slug].js b/src/pages/my/transactions/[slug].js
new file mode 100644
index 00000000..91b686d6
--- /dev/null
+++ b/src/pages/my/transactions/[slug].js
@@ -0,0 +1,128 @@
+import { ArrowDownOnSquareIcon, ArrowDownTrayIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
+import AppBar from "../../../components/AppBar";
+import Layout from "../../../components/Layout";
+import LineDivider from "../../../components/LineDivider";
+import WithAuth from "../../../components/WithAuth";
+import { useState } from "react";
+
+const Row = ({ label, children }) => (
+  <div className="grid grid-cols-2">
+    <p className="leading-normal text-gray_r-11">{ label }</p>
+    <div className="text-right leading-normal">
+      { children }
+    </div>
+  </div>
+);
+
+const Section = ({ children }) => (
+  <div className="px-4 pb-4 flex flex-col gap-y-4">
+    { children }
+  </div>
+);
+
+const TitleRow = ({ label, active, onClick }) => (
+  <div className="flex justify-between p-4" onClick={onClick}>
+    <p className="font-medium leading-normal">{ label }</p>
+    { onClick && ( active ? (
+      <ChevronUpIcon className="w-5 h-5" />
+    ) : (
+      <ChevronDownIcon className="w-5 h-5" />
+    ) ) }
+  </div>
+);
+
+export default function DetailTransactions() {
+  const [ activeSection, setActiveSection ] = useState({
+    purchase: false,
+    shipping: false,
+    invoice: false,
+  });
+
+  const toggleSection = ( name ) => {
+    setActiveSection({
+      ...activeSection,
+      [name]: !activeSection[name] 
+    });
+  };
+
+  return (
+    <WithAuth>
+      <Layout>
+        <AppBar title="Detail Transaksi" />
+
+        <div className="text-caption-1">
+          <div className="p-4 flex flex-col gap-y-4">
+            <Row label="Status Transaksi">
+              <span className="badge-green">Pending Quotation</span>
+            </Row>
+            <Row label="No Transaksi">SO/2023/03212</Row>
+            <Row label="Purchase Order">
+                PO/2023/02123
+                <ArrowDownOnSquareIcon className="w-5 h-5 inline"/>
+            </Row>
+            <Row label="Metode Pembayaran">BCA Transfer</Row>
+            <Row label="Ketentuan Pembayaran">Cash Before Delivery</Row>
+            <Row label="Nama Sales">Rafi Zadanly</Row>
+            <Row label="Waktu Transaksi">01 Januari 2023</Row>
+          </div>
+
+          <LineDivider />
+
+          <TitleRow 
+            label="Detail Pembeli" 
+            active={activeSection.purchase} 
+            onClick={() => toggleSection('purchase')} 
+          />
+          { activeSection.purchase && (
+            <Section>
+              <Row label="Nama">John Doe</Row>
+              <Row label="Email">johndoe@gmail.com</Row>
+              <Row label="No Telepon">081223538754</Row>
+              <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
+            </Section>
+          ) }
+
+          <LineDivider />
+
+          <TitleRow 
+            label="Detail Pengiriman" 
+            active={activeSection.shipping} 
+            onClick={() => toggleSection('shipping')} 
+          />
+          { activeSection.shipping && (
+            <Section>
+              <Row label="Nama">John Doe</Row>
+              <Row label="Email">johndoe@gmail.com</Row>
+              <Row label="No Telepon">081223538754</Row>
+              <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
+            </Section>
+          ) }
+
+          <LineDivider />
+
+          <TitleRow 
+            label="Detail Penagihan" 
+            active={activeSection.invoice} 
+            onClick={() => toggleSection('invoice')} 
+          />
+          { activeSection.invoice && (
+            <Section>
+              <Row label="Nama">John Doe</Row>
+              <Row label="Email">johndoe@gmail.com</Row>
+              <Row label="No Telepon">081223538754</Row>
+              <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
+            </Section>
+          ) }
+
+          <LineDivider />
+
+          <TitleRow 
+            label="Detail Produk" 
+            active={false} 
+          />
+
+        </div>
+      </Layout>
+    </WithAuth>
+  );
+}
\ No newline at end of file